<script setup lang="ts">
import { jumpToBlank } from '@/utils'

interface Props {
  url: string
  title: string
  target: string
  description?: string
}
const props = defineProps<Props>()

const handleContentJump = () => {
  jumpToBlank(props.target)
}
</script>

<template>
  <div
    class="content-card-class inline-block cursor-pointer p-1 mr-5 mb-3"
    @click="handleContentJump"
  >
    <a-tooltip :title="description" placement="bottomRight" arrowPointAtCenter>
      <div class="flex items-center">
        <img :src="url" />
        <span class="ml-2 font-mono">{{ title }}</span>
      </div>
    </a-tooltip>
  </div>
</template>

<style lang="scss" scoped>
.content-card-class {
  transition: all ease 0.2s;
  &:hover {
    color: #0788bf;
    border: 1px solid #e5e3e3;
  }
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: rgba($color: #a5a5a5, $alpha: 0.1);
  img {
    width: 1rem;
    height: 1rem;
  }
}
</style>
